<!--  -->
<template>
  <div class="bottom_view">
    <div class="view">
      <el-card shadow="hover">
        <template slot="header">
          <div class="bottom_view_title"><span>关键词搜索</span></div>
        </template>
        <div class="bottom_view_chart">
          <div class="chart_wrapper">
            <div class="common_chart">
              <div class="chart_title">搜索用户数</div>
              <div class="chart_num">93,624</div>
              <v-chart :option="searchUsersOption"></v-chart>
            </div>
            <div class="common_chart">
              <div class="chart_title">搜索量</div>
              <div class="chart_num">93,624</div>
              <v-chart :option="searchCountOption"></v-chart>
            </div>
          </div>
          <div class="table_wrapper">
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="order"
                label="排序"
                width="130">
              </el-table-column>
              <el-table-column
                prop="keywords"
                label="关键词"
                width="130">
              </el-table-column>
              <el-table-column
                prop="total"
                label="总搜索量">
              </el-table-column>
              <el-table-column
                prop="users"
                label="搜索用户数">
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div class="view">
       <el-card shadow="hover">
        <div slot="header" class="category_sales_view">
          <div class="bottom_view_title"><span>分类销售排行</span></div>
          <div class="right_cat">
            <el-radio-group v-model="radio" size="small">
              <el-radio-button label="品类"></el-radio-button>
              <el-radio-button label="商品"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="category_sales_chart">
          <v-chart :option="categoryOption"></v-chart>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio:"品类",
      searchUsersOption:{
        grid:{
          top: 0,
          left:0,
          right:0,
          bottom:0
        },
        xAxis:{
          show:false,
          type:"category",
          boundaryGap:false,
        },
        yAxis:{
          show:false
        },
        series:[{
          type:"line",
          data:[100,70,10,50,20,90,6,10,60,80],
          barWidth:"30%",
          areaStyle:{
            color:"#3398db",
          },
          itemStyle:{
            opacity:0
          },
          lineStyle:{
            width:0
          },
          smooth:true
        }]
      },
      searchCountOption:{
        grid:{
          top: 0,
          left:0,
          right:0,
          bottom:0
        },
        xAxis:{
          show:false,
          type:"category",
          boundaryGap:false,
        },
        yAxis:{
          show:false
        },
        series:[{
          type:"line",
          data:[100,70,10,50,20,90,6,10,60,80],
          barWidth:"30%",
          areaStyle:{
            color:"#3398db",
          },
          itemStyle:{
            opacity:0
          },
          lineStyle:{
            width:0
          },
          smooth:true
        }]
      },
      tableData:[{
        order:1,
        keywords:"北京",
        total:100,
        users:100
        },{
        order:2,
        keywords:"北京",
        total:100,
        users:100
        },{
        order:3,
        keywords:"北京",
        total:100,
        users:100
        },{
        order:4,
        keywords:"北京",
        total:100,
        users:100
        }
      ],
      categoryOption:{}
    }
  },
  mounted() {
    this.categoryOption = this.getCategoryOption();
  },
  methods: {
    handleCurrentChange(page){
      console.log(page)
    },
    getCategoryOption(){
      let categoryData = [{
        name:"简餐快餐 | 20%",
        value:20,
        legendName:"简餐快餐"
      },{
        name:"美食休闲 | 20%",
        value:20,
        legendName:"美食休闲"
      },{
        name:"丽人运动 | 50%",
        value:60,
        legendName:"丽人运动"
      },{
        name:"百货零食 | 10%",
        value:10,
        legendName:"百货零食"
      }]
      return {
        title:[{
          text:"品类分布",
          textStyle:{
            color:"#333",
            fontSize:14,
            fontWeight:"normal"
          }
        },{
          text:"累计订单量",
          subtext:"390",
          textStyle:{
            color:"#666",
            fontSize:14,
            fontWeight:"normal"
          },
          subtextStyle:{
            color:"#333",
            fontSize:30,
            fontWeight:"normal"
          },
          textAlign:"center",
          left:"34%",
          top:"43%"
        }],
        legend:{
          type:"scroll",
          left:"70%",
          top: "middle",
          orient:"vertical",
          formatter:function(params) {
            return params;
          },
          textStyle:{
            color:"#666"
          }
        },
        tooltip:{

        },
        series:[{
          type:"pie",
          data:categoryData,
          center:['35%','middle'],
          radius: ['45%','60%'],
          itemStyle:{
            borderColor:"#fff",
            borderWidth:4
          },
          labelLine:{
            length:4,
            length2:6
          },
          label:{
            color: "#666",
            formatter:function(params){
              return params.data.legendName;
            }
          }
        }]
      }
    }
  },
}

</script>

<style lang='less' scoped>
.bottom_view{
  margin-top: 20px;
  display: flex;
  .view{
    flex:1;
    &:first-child{
      margin-right: 10px;
    }
    &:last-child{
      margin-left: 10px;
    }
    .bottom_view_title{
      padding: 20px;
      font-size: 14px;
      color: #333;
    }
    .bottom_view_chart{
      padding: 0 30px;
      .chart_wrapper{
        width: 100%;
        display: flex;
        .common_chart{
          flex: 1;
          &:first-child{
            margin-right: 10px;
          }
          &:last-child{
            margin-left: 10px;
          }
          .chart_title{
            font-size: 14px;
            color: #666;
          }
          .chart_num{
            font-size: 22px;
            font-weight: bold;
            color: #333;
            letter-spacing: 1px;
            padding: 4px 0;
          }
          .echarts{
            width: 100%;
            height: 50px;
          }
        }
      }
      .table_wrapper{
        margin-top: 14px;
        width: 100%;
        height: 270px;
      }
      .el-pagination{
        text-align: center;
      }
    }
    .category_sales_view{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right_cat{
        margin-right: 20px;
      }
    }
    .category_sales_chart{
      width:100%;
      height: 424px;
    }
  }
}
</style>
